<template>
  <el-dialog
    title="题目预览"
    :visible="questionsDialog"
    width="900"
    @close="close">
    <el-row>
      <el-col :span='6'>【题型】：{{questionType}}</el-col>
      <el-col :span='6'>【编号】：{{row.id}}</el-col>
      <el-col :span='6'>【难度】：{{difficulty}}</el-col>
      <el-col :span='6'>【标签】：{{row.tags}}</el-col>
      <el-col :span='6'>【学科】：{{row.subjectName}}</el-col>
      <el-col :span='6'>【目录】：{{row.directoryName}}</el-col>
      <el-col :span='6'>【方向】：{{row.direction}}</el-col>
    </el-row>
    <hr>
    【题干】：
    <div style="color: blue;" v-html="row.question"></div>
    <div v-if="row.questionType !== '3'">
      {{questionType}}题 选项： (以下选中的选项为正确答案)
      <div class="checked" v-if="row.questionType === '2'">
        <el-checkbox
          v-for="(item) in row.options"
          :key="item.id"
          :checked='!!item.isRight'>
          {{item.code}}: {{item.title}}
        </el-checkbox>
      </div>
      <div class="checked" v-if="row.questionType === '1'">
        <el-radio
          v-for="(item) in row.options"
          :key="item.id"
          v-model="radio"
          :label="item.isRight">
          {{item.code}}: {{item.title}}
        </el-radio>
      </div>
    </div>
    <hr>
    【参考答案】：<el-button type="danger" size="small" @click="isShow=true">视频答案预览</el-button>
    <div class="video" :class="{isShow: !isShow}">
      <video controls='controls' :src="row.videoURL"></video>
    </div>
    <hr>
    【答案解析】：
    <div style="display: inline-block;">
      <p>{{row.answer | html1Text}}</p>
    </div>
    <hr>
    【题目备注】：
    <div style="display: inline-block;">
      <p>{{row.remarks | html1Text}}</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      checked: true,
      questionType: '',
      difficulty: '',
      radio: 1,
      isShow: false
    }
  },

  props: {
    questionsDialog: {
      type: Boolean,
      required: true
    },
    row: {
      type: Object,
      required: true
    }
  },

  created () {
    this.questionTypes(this.row)
    this.difficultys(this.row)
    this.options(this.row)
  },

  methods: {
    close () {
      this.$emit('update:questionsDialog', false)
    },

    //
    options (row) {
      const options = []
      for (let i = 0; i < row.options.length; i++) {
        const str = 'A'
        const option = String.fromCharCode(str.charCodeAt() + i)
        const arr = row.options.filter(item => {
          return item.code === option
        })
        options.push(arr[0])
      }
      this.row.options = options
    },

    // 格式化题型
    questionTypes (row) {
      if (row.questionType === '1') {
        this.questionType = '单选'
      } else if (row.questionType === '2') {
        this.questionType = '多选'
      } else if (row.questionType === '3') {
        this.questionType = '简答'
      }
    },

    // 格式化难度
    difficultys (row) {
      if (row.difficulty === '1') {
        this.difficulty = '简单'
      } else if (row.difficulty === '2') {
        this.difficulty = '一般'
      } else if (row.difficulty === '3') {
        this.difficulty = '困难'
      }
    }
  }
}
</script>

<style scoped lang='less'>
.checked {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .el-checkbox,
  .el-radio {
    margin: 10px 0;
  }
}

.el-row {
  .el-col {
    padding: 10px 0;
  }
}
.video {
  width: 400px;
  height: 300px;

  video {
    width: 100%;
    height: 100%;
  }
}
.isShow {
  display: none;
}
</style>
